<!DOCTYPE html>
<html lang="en">
{include file="user/public/header" /}

<body>
    <div class="container-scroller">
        {include file="user/public/navbar" /}
        <div class="container-fluid page-body-wrapper">
            {include file="user/public/sidebar" /}
            <div class="main-panel" id="apps">

                <div class="content-wrapper">
                    <div class="row">
                        <div class="col-md-12 grid-margin stretch-card" style="min-height: 450px;">
                            <div class="card">
                                <div class="card-body">
                                    <!-- <h4 class="card-title">基础设置</h4> -->
                                    <!-- <p class="card-description">
                                Basic form layout
                              </p> -->
                                    <el-row>
                                        <el-col :span="24">
                                            <el-button type="primary" @click="dialogVisible=true">新增</el-button>
                                        </el-col>
                                    </el-row>
                                    <el-table :data="tableData" style="margin-top: 10px;">
                                        <el-table-column prop="name" label="类型"></el-table-column>
                                        <el-table-column prop="price" label="价格"></el-table-column>
                                        <el-table-column prop="logo" label="图片地址" align="center"  key="slot" >
                                            <template #default="scope">
                                                <el-image :src="scope.row.logo" style="height: 50px;"/>
                                            </template>
                                          </el-table-column>
                                        <el-table-column prop="createtime" label="创建时间"></el-table-column>
                                        <el-table-column prop="address" label="操作"  key="slot" >
                                            <template #default="scope">
                                                <el-button link type="primary" size="small">编辑</el-button>
                                                <el-button link type="primary" size="small" @click="DelType(scope.row.id)">删除</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>


                <el-dialog v-model="dialogVisible" title="Tips" width="50%">
                    <el-form label-width="120px" style="width: 90%;padding-top: 10px;">
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="名称">
                                    <el-input style="width: 400px;" v-model="add.name" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="单价">
                                    <el-input-number v-model="add.price" :min="1" :max="1000" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="图片:">
                                    <el-upload class="avatar-uploader" action="/demo/user/upload"
                                        :show-file-list="false" :on-success="handleAvatarSuccess"
                                        :before-upload="beforeAvatarUpload">
                                        <img v-if="add.logo" :src="add.logo" class="avatar" style="width:60px" />
                                        <div v-else class="el-upload__text">
                                            <i class="el-icon-plus"></i>
                                            点击上传
                                        </div>
                                    </el-upload>
                                </el-form-item>

                            </el-col>


                        </el-row>

                    </el-form>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="dialogVisible = false">取消</el-button>
                            <el-button type="primary" @click="AddForm()">
                                Confirm
                            </el-button>
                        </span>
                    </template>
                </el-dialog>

                <!-- main-panel ends -->
            </div>
        </div>

        {include file="user/public/footer" /}

        <script type='text/javascript'>

        var list= {:json_encode($list)};

            const App = {
                data() {
                    return {
                        dialogVisible: false,
                        add: {
                            name: "",
                            price: "",
                            logo: "",
                        },
                        tableData:list
                    };
                },
                methods: {
                    handleAvatarSuccess(response, uploadFile) {
                        console.log(response, uploadFile)
                        this.add.logo = response.data
                    },
                    beforeAvatarUpload(rawFile) {
                        console.log(rawFile.type)
                        if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png' && rawFile.type !==
                            'image/gif') {
                            ElMessage.error('上传格式必须为.jpg,.png,.gif格式!')
                            return false
                        } else if (rawFile.size / 1024 / 1024 > 2) {
                            ElMessage.error('Avatar picture size can not exceed 2MB!')
                            return false
                        }
                        return true

                    },
                    AddForm() {
                        $.ajax({
                            type: 'POST',
                            url: '/demo/user/setform',
                            data: this.add,
                            success: function (data) {
                                location.reload(true)
                            },
                            error: function (jqXHR) {
                                //请求失败函数内容
                            }
                        });

                    },
                    DelType(id){
alert(id)
                    },
                    setinfo() {
                        location.href = "/demo/user/setinfo"
                    },
                    onSubmit() {

                       

                    }
                }
            };
            const app = Vue.createApp(App);
            app.use(ElementPlus);
            app.mount("#apps");
        </script>





</body>

</html>